<script lang="ts" setup>
import HeroFull from "@/components/Index/Hero-Full.vue";
import HeroLong from "@/components/Index/Hero-Long.vue";
import HeroNarrow from "@/components/Index/Hero-Narrow.vue";
import HeroSuper from "@/components/Index/Hero-Super.vue";
import HeroRead from "@/components/Index/Hero-Read.vue";
import {
  ref,
  toRaw,
  toRefs,
  watch,
  reactive,
  computed,
  onMounted,
  watchEffect,
} from "vue";

import { IndexShowData } from "@/api/interface";
interface Props {
  data: IndexShowData[];
}

const props = defineProps<Props>();

//要显示的组件
//const tabs = [HeroFull, HeroLong, HeroNarrow, HeroSuper];

//计算图片宽与高的比例，使用不同的hero
/**
 * 传出计算结果
 * @param data 图片信息
 */
const getResult = (data: IndexShowData["image"]["details"]) => {
  //判断图片的宽度是否为0
  if (data.width !== 0) {
    const scale = data.width / data.height;
    console.log("图片计算结果" + scale);
    return scale;
  } else {
    const scale = 1;
    return scale;
  }
};

//存储计算结果
const scale = ref();

watch(
  () => props.data,
  (newVal) => {
    //拿到代理的值
    const arr = JSON.parse(JSON.stringify(newVal));
    //如果文章没有特色图，则给默认值
    if (arr[0].image.length !== 0) {
      scale.value = getResult(newVal[0]["image"]["details"]);
    } else {
      //无特色图
      scale.value = 1;
      console.log("无特色图");
    }
  }
);

const tp = computed(() => {
  if (scale.value > 1.7) {
    return HeroSuper;
  }
  if (scale.value > 1.5) {
    return HeroFull;
  }
  if (scale.value < 0.9) {
    return HeroLong;
  }
  return HeroNarrow;
});

/**
 * 文字在下：2880X1620  1.777
 */
</script>
<template>
  <template v-for="item in data" :key="item.id">
    <HeroRead :data="item"></HeroRead>
    <!--
    <HeroSuper :data="item"></HeroSuper>
    <HeroFull :data="item"></HeroFull>
    <HeroLong :data="item"></HeroLong>
    <HeroNarrow :data="item"></HeroNarrow>
    -->
  </template>
  <!--<component :data="data" :is="tp" />-->
</template>
<style lang="less" scoped></style>
